/* 动态渐变背景和光效装饰样式 */

// 基础颜色定义
$neon-blue: #00f0ff; // 电蓝
$neon-purple: #9d00ff; // 荧光紫
$neon-pink: #ff00ff; // 霓虹粉
$neon-cyan: #00ffaa; // 青绿
$dark-bg: #05001a; // 深邃背景

// 发光效果定义
$glow-base: 5px; // 发光基础强度
$glow-blue: 0 0 $glow-base $neon-blue, 0 0 calc($glow-base*2) $neon-blue, 0 0 calc($glow-base*3) rgba(0, 240, 255, 0.7);
$glow-purple: 0 0 $glow-base $neon-purple, 0 0 calc($glow-base*2) $neon-purple, 0 0 calc($glow-base*3) rgba(157, 0, 255, 0.7);

// 动态渐变背景
@keyframes bg-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

// 粒子浮动动画
@keyframes particle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
}

// 呼吸光效动画
@keyframes breathe {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); }
  50% { opacity: 1; box-shadow: 0 0 20px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.5); }
}

// 网格背景动画
@keyframes grid-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

// 全局背景样式
.global-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(-45deg, #05001a, #1a0033, #001a33, #003333);
  background-size: 400% 400%;
  animation: bg-flow 15s ease infinite;
  z-index: -1;

  // 网格覆盖
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: grid-pulse 6s linear infinite;
    pointer-events: none;
  }
}

// 背景粒子
.bg-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;

  .particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 240, 255, 0.5);
    animation: particle-float 10s infinite ease-in-out;
  }
}

// 光效装饰带
.glow-stripe {
  height: 3px;
  background: linear-gradient(90deg, transparent, $neon-blue, transparent);
  box-shadow: $glow-blue;
  animation: breathe 3s infinite;
}

// 模块间发光分隔线
.module-divider {
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.3), transparent);
  box-shadow: 0 0 5px rgba(100, 255, 218, 0.2);
}

// 发光点缀
.glow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: $neon-pink;
  box-shadow: 0 0 10px $neon-pink, 0 0 20px rgba(255, 0, 255, 0.5);
  animation: breathe 2s infinite alternate;
}